<template>
  <div ref="main" class="mychart">123</div>
</template>
<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
  name: 'EchartMap',
  props: {
    titleProp: {
      type: Object,
      default: () => ({
        text: 'USA Population Estimates (2012)',
        subtext: 'Data from www.census.gov',
        sublink: 'http://www.census.gov/popest/data/datasets.html',
        left: 'right'
      }),
      required: false
    },
    visualMapProp: {
      type: Object,
      default: () => ({
        type: 'continuous',
        left: 'right',
        min: 500000,
        max: 38000000,
        inRange: {
          color: [
            '#313695',
            '#4575b4',
            '#74add1',
            '#abd9e9',
            '#e0f3f8',
            '#ffffbf',
            '#fee090',
            '#fdae61',
            '#f46d43',
            '#d73027',
            '#a50026'
          ]
        },
        text: ['High', 'Low'],
        calculable: true,
        seriesIndex: 0,
        // itemWidth: 20,
        // itemHeight: 120
      }),
      required: false
    },
    specialAreasProp: {
      type: Object,
      default: () => ({
        Alaska: {
          left: -131,
          top: 25,
          width: 15
        },
        Hawaii: {
          left: -110,
          top: 28,
          width: 5
        },
        'Puerto Rico': {
          left: -76,
          top: 26,
          width: 2
        }
      }),
      required: false
    },
    seriesNameProp: {
      type: String,
      default: () => 'USA PopEstimates',
      required: false
    },
    seriesMapProp: {
      type: String,
      default: () => 'USA',
      required: false
    },
    seriesMapZoomProp: {
      type: Number,
      default: () => 1,
      required: false
    },
    seriesMapTopProp: {
      type: String,
      default: () => '50%',
      required: false
    },
    seriesDataProp: {
      type: Array,
      default: () => [
        { name: 'Alabama', value: 4822023 },
        { name: 'Alaska', value: 731449 },
        { name: 'Arizona', value: 6553255 },
        { name: 'Arkansas', value: 2949131 },
        { name: 'California', value: 38041430 },
        { name: 'Colorado', value: 5187582 },
        { name: 'Connecticut', value: 3590347 },
        { name: 'Delaware', value: 917092 },
        { name: 'District of Columbia', value: 632323 },
        { name: 'Florida', value: 19317568 },
        { name: 'Georgia', value: 9919945 },
        { name: 'Hawaii', value: 1392313 },
        { name: 'Idaho', value: 1595728 },
        { name: 'Illinois', value: 12875255 },
        { name: 'Indiana', value: 6537334 },
        { name: 'Iowa', value: 3074186 },
        { name: 'Kansas', value: 2885905 },
        { name: 'Kentucky', value: 4380415 },
        { name: 'Louisiana', value: 4601893 },
        { name: 'Maine', value: 1329192 },
        { name: 'Maryland', value: 5884563 },
        { name: 'Massachusetts', value: 6646144 },
        { name: 'Michigan', value: 9883360 },
        { name: 'Minnesota', value: 5379139 },
        { name: 'Mississippi', value: 2984926 },
        { name: 'Missouri', value: 6021988 },
        { name: 'Montana', value: 1005141 },
        { name: 'Nebraska', value: 1855525 },
        { name: 'Nevada', value: 2758931 },
        { name: 'New Hampshire', value: 1320718 },
        { name: 'New Jersey', value: 8864590 },
        { name: 'New Mexico', value: 2085538 },
        { name: 'New York', value: 19570261 },
        { name: 'North Carolina', value: 9752073 },
        { name: 'North Dakota', value: 699628 },
        { name: 'Ohio', value: 11544225 },
        { name: 'Oklahoma', value: 3814820 },
        { name: 'Oregon', value: 3899353 },
        { name: 'Pennsylvania', value: 12763536 },
        { name: 'Rhode Island', value: 1050292 },
        { name: 'South Carolina', value: 4723723 },
        { name: 'South Dakota', value: 833354 },
        { name: 'Tennessee', value: 6456243 },
        { name: 'Texas', value: 26059203 },
        { name: 'Utah', value: 2855287 },
        { name: 'Vermont', value: 626011 },
        { name: 'Virginia', value: 8185867 },
        { name: 'Washington', value: 6897012 },
        { name: 'West Virginia', value: 1855413 },
        { name: 'Wisconsin', value: 5726398 },
        { name: 'Wyoming', value: 576412 },
        { name: 'Puerto Rico', value: 3667084 }
      ],
      required: false
    },
    mapUrlProp: {
      type: String,
      default: () => 'http://localhost:8000/USAjson',
      required: false
    }
  },
  data() {
    return {
      myChart: {},
      option: {
        title: this.titleProp,
        geo: {
          map: this.seriesMapProp,
          roam: false,
          show: true,
          itemStyle: {
            areaColor: 'rgba(0,0,0,0)',
            borderWidth: 0
          },
          zlevel: 3
        },
        tooltip: {
          trigger: 'item',
          showDelay: 0,
          transitionDuration: 0.2
        },
        visualMap: this.visualMapProp,
        toolbox: {
          show: true,
          //orient: 'vertical',
          left: 'left',
          top: 'top',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        series: [
          {
            name: this.seriesNameProp,
            type: 'map',
            roam: true,
            map: this.seriesMapProp,
            zoom: this.seriesMapZoomProp,
            // top: this.seriesMapTopProp,
            emphasis: {
              label: {
                show: true
              }
            },
            z: 2,
            zlevel: 2,
            data: this.seriesDataProp
          },
          this.randomPieSeries([118.187759, 36.376092], 12),
          this.randomPieSeries([113.429919, 23.334643], 15),
          this.randomPieSeries([113.619717, 33.902648], 12),
          this.randomPieSeries([88.388277, 31.56375], 17),
        ]
      }
    }
  },
  mounted() {
    this.initChart();
    this.myChart.on('georoam', (params) => {
      let myOption = this.myChart.getOption();
      if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
        myOption.series[0].zoom = myOption.geo[0].zoom;//myChart的缩放等级跟着上层的geo一起改变
        myOption.series[0].center = myOption.geo[0].center;//myChart的中心位置随着上层geo一起改变
      } else {//捕捉到拖曳时
        myOption.series[0].center = myOption.geo[0].center;//myChart的中心位置随着上层geo一起改变
      }
      this.myChart.setOption(myOption);//设置option
    });
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.main);
      this.myChart.showLoading();
      axios.get(this.mapUrlProp).then((usaJson) => {
        this.myChart.hideLoading();
        echarts.registerMap(this.seriesMapProp, usaJson.data, this.specialAreasProp);
        this.myChart.setOption(this.option);
      });
    },
    randomPieSeries(center, radius) {
      const data = ['A', 'B', 'C', 'D'].map((t) => {
        return {
          value: Math.round(Math.random() * 100),
          name: 'Category ' + t
        };
      });
      return {
        type: 'pie',
        coordinateSystem: 'geo',
        tooltip: {
          formatter: '{b}: {c} ({d}%)'
        },
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        animationDuration: 0,
        z: 6,
        zlevel: 6,
        radius: radius,
        center: center,
        data: data
      };
    }
  },
  watch: {
    seriesDataProp: {
      handler() {
        // console.log('newVal,oldVal', newVal, oldVal);
        // this.option1.series[0].data = newVal
        // this.wsData = newVal
        // console.log('seriesData',this.wsData);
        this.$nextTick(() => {
          this.initChart()
        })

      },
      deep: true,
      immediate: true
    }
  },
}
</script>
<style lang="less" scoped>
.mychart {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
}
</style>